<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
    <head>
        <meta charset="utf-8">
        <title>菜单管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="/resources/layui/css/layui.css"/>
        <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/dtree.css">
        <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

    </head>
    <body>
        <div style="padding: 20px 10px 0px">
            <fieldset class="layui-elem-field">
                <legend>查询条件</legend>
                <div class="layui-field-box">
                    <form class="layui-form" action="" id="searchFrm">
                        <div class="layui-form-item layui-input-inline">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入菜单名称" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" style="text-align: center;">
                            <div class="layui-input-block">
                                <button type="submit" shiro:hasPermission="menu:view" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                                <button type="reset"  shiro:hasPermission="menu:view" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
        <table id="menuTable" lay-filter="menuTable"></table>

        <!--toolbar开始-->
        <div id="tableToolbar" style="display: none;">
            <button type="button" shiro:hasPermission="menu:create" class="layui-btn" lay-event="add">添加</button>
            <!--<button type="button" class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>-->
        </div>
        <div id="cellToolbar" style="display: none;">
            <button type="button" shiro:hasPermission="menu:update" class="layui-btn layui-btn-sm layui-btn-xs" lay-event="update">修改</button>
            <button type="button" shiro:hasPermission="menu:delete" class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除
            </button>
        </div>
        <!--toolbar结束-->

        <!--添加修改弹出层开始-->
        <form class="layui-form" id="addForm" lay-filter="addForm" action="" style="display: none;padding: 20px">
            <div class="layui-form-item">
                <label class="layui-form-label">父级菜单：</label>
                <div class="layui-input-block">
                    <div class="layui-unselect layui-form-select" id="menuaccordiontree">
                        <div class="layui-select-title">
                            <input type="hidden" name="id" id="id">
                            <input type="hidden" id="pid" name="pid" required class="layui-input layui-unselect">
                            <input type="text" name="pname" id="input_menuaccordiontree" placeholder="请选择" required
                                   readonly="" class="layui-input layui-unselect">
                            <i class="layui-edge"></i>
                        </div>
                    </div>
                    <div class="layui-card" id="test">
                        <div class="layui-card-body">
                            <div id="toolbarDiv">
                                <ul id="slTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序码</label>
                <div class="layui-input-block">
                    <input type="text" id="ordernum" name="ordernum" required lay-verify="required" autocomplete="off"
                           placeholder="请输入排序码"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" required lay-verify="required" autocomplete="off"
                           placeholder="请输入菜单名称"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单地址</label>
                <div class="layui-input-block">
                    <input type="text" id="href" name="href" autocomplete="off"
                           placeholder="请输入菜单地址"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <!--<textarea class="layui-textarea" id="remark" name="remark" style="display: none"></textarea>-->
                    <textarea name="icon" id="icon" placeholder="请输入" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否展开</label>
                <div class="layui-input-block">
                    <input type="radio" name="open" value="1" title="展开" checked>
                    <input type="radio" name="open" value="0" title="不展开">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <input type="radio" name="available" value="1" title="可用" checked>
                    <input type="radio" name="available" value="0" title="不可用">
                </div>
            </div>


            <div class="layui-input-block">
                <button type="submit" shiro:hasPermission="menu:create,menu:update" class="layui-btn" id="release" lay-submit="" lay-filter="release">保存</button>
                <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>
            </div>
        </form>
        <!--添加修改弹出层结束-->

        <script src="/resources/layui/layui.js"></script>
        <script>
            var tableIns;
            layui.extend({
                dtree: '/resources/layui/layui-ext/dtree/dtree'
            }).use(['table', 'form', 'jquery', 'dtree'], function () {
                var table = layui.table;
                var form = layui.form;
                var $ = layui.jquery;

                dtree = layui.dtree;
                //第一个实例
                tableIns = table.render({
                    elem: '#menuTable'
                    , height: 312
                    , url: '/menu/loadAllMenuForTable' //数据接口
                    , page: true //开启分页
                    , toolbar: "#tableToolbar"
                    , cols: [
                        [ //表头
                            {width: 80, type: 'checkbox'}
                            , {field: 'id', title: 'ID', width: 80}
                            , {field: 'pid', title: '父菜单ID', width: 100}
                            , {field: 'name', title: '菜单名称', width: 100}
                            , {
                            field: 'icon', title: '图标', width: 70, templet: function (data) {
                                return "<span class='layui-icon'>" + data.icon + "<span>";
                            }
                        }
                            , {
                            field: 'open', title: '是否展开', width: 100, templet: function (data) {
                                return data.open == 1 ? '展开' : '不展开';
                            }
                        },
                            {
                                field: 'available', title: '是否可用', width: 100, templet: function (data) {
                                    return data.available == 1 ? '可用' : '不可用';
                                }
                            }
                            , {field: 'href', title: '菜单地址', width: 100}
                            , {field: 'target', title: 'TARGET', width: 130}
                            , {field: 'ordernum', title: '排序码', width: 130}
                            , {title: '操作', width: 150, fixed: 'right', align: 'center', toolbar: '#cellToolbar'}
                        ]
                    ]
                });
                //弹出层的index
                var layerindex;

                //添加修改公用弹出层的路径
                var addFormUrl;


//监听事件
                table.on('toolbar(menuTable)', function (obj) {
                    // var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'add':
                            addMenu();
                            break;
                        // case 'batchDelete':
                        //     layer.msg('批量删除');
                        //     var checkStatus = table.checkStatus('menuTable')
                        //         , data = checkStatus.data;
                        //
                        //     layer.alert(JSON.stringify(data));
                        //
                        //     break;
                    }
                    ;
                });


                table.on('tool(menuTable)', function (obj) {
                    var checkStatus = table.checkStatus(obj.data.id);

                    switch (obj.event) {
                        case 'update':
                            updateMenu(obj);
                            break;
                        case 'delete':
                            deleteMenu(obj);
                            break;
                    }
                    ;
                });

                /**
                 *
                 * 添加
                 */
                function addMenu() {
                    layer.msg('添加');
                    layer.open({
                        title: '添加菜单',
                        type: 1,
                        area: ['500px', '400px'],
                        content: $('#addForm'),
                        success: function (layero, index) {
                            //清空表单里面的数据
                            $("#addForm")[0].reset();
                            // 使下拉框为不弹出状态

                            $(this).removeClass("layui-form-selected");
                            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                            //清空pid内容
                            layerindex = index;
                            $.post("/menu/loadMaxOrderNum", function (data) {
                                $("#ordernum").val(data);
                            })
                            addFormUrl = "/menu/addMenu";
                        }
                    });
                }

                /**
                 * 修改菜单
                 * @param obj
                 */
                function updateMenu(obj) {
                    layer.open({
                        title: '修改菜单',
                        type: 1,
                        area: ['500px', '400px'],
                        content: $('#addForm'),
                        success: function (layero, index) {
                            //清空表单里面的数据
                            $("#addForm")[0].reset();
                            //装载默认数据

                            form.val("addForm", obj.data);

                            form.val("addForm", {open: obj.data.open + ""});
                            form.val("addForm", {available: obj.data.available + ""});

                            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                            // 下拉框回显
                            //设置下拉框里面的默认的上级菜单的id
                            dtree.dataInit("slTree", obj.data.pid);
                            //设置输入框里面的默认的上级菜单名称
                            //获得当前选中的
                            var param = dtree.getNowParam("slTree");
                            $("#input_menuaccordiontree").val(param.context);


                            layerindex = index;
                            addFormUrl = "/menu/updateMenu";
                        }
                    });
                }

                /**
                 *删除菜单
                 *
                 */

                function deleteMenu(obj) {
                    //检查是否有子节点

                    $.post("/menu/checkHasChildren", {id: obj.data.id}, function (data) {
                        if (data.code == 200) {
                            layer.alert("菜单{" + obj.data.name + "}有子节点 请先删除子节点", {icon: 2})
                        } else {

                            layer.confirm("确定要删除{" + obj.data.name + "}吗?", {icon: 3, title: '提示'}, function (index) {

                                $.post("/menu/deleteMenu", {id: obj.data.id}, function (data) {
                                    layer.msg(data.msg)
                                    if (data.code == 200) {
                                        //刷新 树 表格 下拉树
                                        //刷新表格
                                        $("#doReset").click();
                                        //刷新左侧树
                                        window.parent.left.reloadTree();
                                        //刷新下拉树
                                        loadslTree();
                                    }
                                });
                                layer.close(index);
                            });
                        }
                    });

                }


                //弹出层下拉树开始

                function loadslTree() {
                    var DTree = dtree.render({
                        elem: "#slTree",
                        method: "get",
                        url: '/menu/loadAllLeftMenuManagerTree',
                        icon: "1",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        accordion: true
                        , response: {
                            message: "msg",
                            statusCode: 0
                        }
                    });
                }

                loadslTree();

                $("#menuaccordiontree").on("click", function () {
                    $(this).toggleClass("layui-form-selected");
                    $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
                });

                dtree.on("node(slTree)", function (obj) {
                    var param = dtree.getNowParam("slTree"); // 获取当前选中节点
                    $("#pid").val(param.nodeId);
                    $("#input_menuaccordiontree").val(obj.param.context);
                    $("#menuaccordiontree").toggleClass("layui-form-selected");
                    $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
                });

                //弹出层下拉树结束


                //监控添加提交事件
                form.on("submit(release)", function (data) {
                    var params = $("#addForm").serialize();
                    var pid = $("#pid").val();
                    $.post(addFormUrl, params, function (data) {
                        layer.msg(data.msg);
                    });

                    //重置添加表单
                    $("#addForm")[0].reset();
                    //刷新表格 左侧树 弹出层表格
                    // tableIns.reload();
                    //刷新表格
                    $("#doReset").click();
                    //刷新左侧树
                    window.parent.left.reloadTree();
                    //刷新下拉树
                    loadslTree();

                    $(this).removeClass("layui-form-selected");
                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    layer.close(layerindex);
                });
                $("#cancel").click(function () {
                    $("#addForm")[0].reset();
                    $(this).removeClass("layui-form-selected");
                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    layer.close(layerindex)
                    //清空pid内容
                    $("#pid").val("");
                })

                //监听查询事件
                form.on("submit(doSearch)", function (data) {
                    var params = $("#searchFrm").serialize();
                    tableIns.reload({
                        url: '/menu/loadAllMenuForTable?' + params
                        ,where:{
                            page:1
                        }
                    })
                    //刷新表格
                    return false;
                });
                //监控重置事件
                $("#doReset").click(function () {
                    tableIns.reload({
                        url: '/menu/loadAllMenuForTable?'
                        // ,where:{
                        //     page:1
                        // }
                    })
                    //刷新表格
                    return false;
                });

            });

            function reloadTable(menuid) {
                tableIns.reload({
                    url: '/menu/loadAllMenuForTable?id=' + menuid,
                    // where:{
                    //     page:1
                    // }
                })
            }
        </script>
    </body>

</html>